<template>
  <div>
    <PerfectTableComponent
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      :removeQueryField="removeQueryField"
      :clearQuery="clearQuery"
      title="字典"
      ref="tableRef"
      paginationLayout="total,jumper"
      :table="table"
      :tableColumns="tableColumns"
      :showTableIndex="false"
      :showOperatorColumn="false"
      :showEditButtonInToolBar="true"
      :showRightToolBar="false"
      :baseUrl="urls.API_URL_BACKSTAGE_DICT_MANAGE"
      v-model:form="form"
      :formHeader="formHeader"
      @rowClick="rowClick"
      @afterDeleteSuccess="emit('afterDeleteSuccess', $event)"
    ></PerfectTableComponent>
    <!--表格对象-->
    <!-- <DictManageTable
      ref="tableRef"
      :table="table"
      :query="query"
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      @rowClick="rowClick"
      @addRow="addRow"
      @editRow="editRow"
    /> -->
    <!--添加编辑对话框-->
    <!-- <DictAddOrEditDialog ref="dialogRef" :action="action" /> -->
  </div>
</template>

<script lang="ts" setup>
// 导入表格组件
import PerfectTableComponent from '@/components/base/table/PerfectTableComponent.vue';

import { defineExpose, nextTick, onMounted, provide, ref } from 'vue';
import type { FormHeader, TableColumn } from '@/types/interface/base_interface';
import { yesOrNoDict } from '@/api/dict';
import useTableList from '@/api/hooks/useTableList';
import type { TableRef } from '@/types/interface/base_ref_interface';
import type { Dict } from '@/types/interface/sys_interface';
import Request from '@/api/request/request';
import urls from '@/api/request/urls';
import { defineEmits } from 'vue';
const emit = defineEmits(['afterLoadTable', 'rowClick', 'afterDeleteSuccess']);
// 表格工具必备参数，此处设置为不立即加载
const { table, query, loadTableList, removeQueryField, clearQuery, changePageSize, changePage } = useTableList(
  urls.API_URL_BACKSTAGE_DICT_MANAGE,
  true,
  {},
  false
);
// 将表格刷新函数传到子容器
provide('loadTableList', loadTableList);

// 定义表格所有的列字段信息
const tableColumns = ref<TableColumn[]>([
  {
    label: '字典名称',
    prop: 'name'
  }
]);
//表单==========================================================
//表单对象
const form = ref<Dict>({});
// 表单元素
const formHeader = ref<FormHeader[]>([
  {
    label: '字典名称',
    prop: 'name',
    rules: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur'
      },
      {
        min: 1,
        max: 30,
        message: '长度在 1 到 30个字符',
        trigger: 'blur'
      }
    ]
  }
]);

// 定义属性菜单的ref对象
const tableRef = ref();
// 获取表格所选中的行
const getSelectionRows = () => tableRef.value!.getSelectionRows();
// onMounted(async () => {
//   // 加载表格数据
//   await loadTableList();
//   if (table.data.length > 0) { // 如果表格存在数据，将第一条记录设置为当前选中行
//     tableRef.value!.toggleRowSelection(table.data[0], true);
//   }
//   console.log(table.data);
// });
// 初始化表格数据，并默认选中第一行，这里暴露给父元素执行，以达到与字典列表项元素的同步
const initTable = async () => {
  // 加载表格数据
  await loadTableList();
  if (table.data.length > 0) {
    // 如果表格存在数据，将第一条记录设置为当前选中行。但是这样也会让getSelectionRows失效
    tableRef.value!.setCurrentRow(table.data[0]);
    //将默认选中行返回给父组件，也是解决getSelectionRows失效失效的问题。
    emit('afterLoadTable', table.data[0]);
    //这里是默认选中并打勾，容易给用户误操作。故取消
    // tableRef.value!.toggleRowSelection(table.data[0], false);
  }
};

// 点击字典表格的行
const rowClick = (row: any): void => {
  emit('rowClick', row);
};
defineExpose({
  // 参考vue3官方文档，需要将函数暴露出去才能被父组件调用，setup模式是不暴露的
  getSelectionRows,
  initTable
});
</script>

<style scoped></style>
